// 一些内置函数
// iscolor , isnumber, isstring, iskeyword, isurl
// 判断是否单位: ispixel, ispercentage, isem
// 颜色:saturate(@base, 5%), lighten(@base, 30%), darken, desaturate, fadein, fadeout, spin(@color, -10)
// 提取颜色信息: hue(@color), saturation(@color), lightness(@color)    @new: hsl(hue(@old), 45%, 90%);
// Math函数: round(1.67), ceil(2.4), floor(2.6)
// percentage(0.5) 50%,转化为百分比
// 继承 .bear:extend(.animal){}  .son:extend(*.parent [name='eyes']){}  .son:extend(.parent all){}  all关键词所有
// 多人开发less时，可以采用命名空间，例如：#tsh{ @name : tanshenghu; }  调用时div{ #tsh>@name;}

// less中还有很多的函数 http://www.cnblogs.com/zfc2201/p/3493335.html

// 字体 设置
.fz( @fz : 12 ){
    font-size : @unit*@fz;
}
.fc( @fcolor : black ){
    color: @fcolor;
}

.lh( @height ){
    // 高度与行高同时定义
    height: @unit*@height;
    line-height: @unit*@height;
}

.H( @height )when( isnumber(@height) ){height:@unit*@height;}
.H( @height )when( ispercentage(@height) ){height:@height;}
.H( @height )when( iskeyword(@height) ){height:@height;}

.W( @width )when( isnumber(@width) ){width:@unit*@width;}
.W( @width )when( ispercentage(@width) ){width:@width;}
.W( @width )when( iskeyword(@width) ){width:@width;}

.WH( @wh:0 ){
    .W( @wh );
    .H( @wh );
}

.border( @options : 1*@unit solid #ccc ){
    border: @arguments;
}
.opacity( @val : 1 ){
    @ieval : @val * 100;
    filter:alpha(opacity= @ieval);
    opacity : @val;
}

// 外边距 设置  iskeyword  isstring  isnumber
.mt( @mt : auto )when( isnumber(@mt) ){margin-top: @unit*@mt;}
.mt( @mt : auto )when( iskeyword(@mt) ){margin-top: @mt;}

.mr( @mr : auto )when( isnumber(@mr) ){margin-right: @unit*@mr;}
.mr( @mr : auto )when( iskeyword(@mr) ){margin-right: @mr;}

.mb( @mb : auto )when( isnumber(@mb) ){margin-bottom: @unit*@mb;}
.mb( @mb : auto )when( iskeyword(@mb) ){margin-bottom: @mb;}

.ml( @ml : auto )when( isnumber(@ml) ){margin-left: @unit*@ml;}
.ml( @ml : auto )when( iskeyword(@ml) ){margin-left: @ml;}

.margin( @mar : auto ){
    margin: @arguments;
}

// 内边距 设置
.pt( @pt : 0 )when( isnumber(@pt) ){padding-top: @unit*@pt;}

.pr( @pr : 0 )when( isnumber(@pr) ){padding-right: @unit*@pr;}

.pb( @pb : 0 )when( isnumber(@pb) ){padding-bottom: @unit*@pb;}

.pl( @pl : 0 )when( isnumber(@pl) ){padding-left: @unit*@pl;}

.padding( @pad : 0 ){
    padding: @arguments;
}

// 定位
.at( @pt )when( isnumber(@pt) ){top: @unit*@pt;}
.at( @pt )when( iskeyword(@pt) ){top: @pt;}

.ar( @pr )when( isnumber(@pr) ){right: @unit*@pr;}
.ar( @pr )when( iskeyword(@pr) ){right: @pr;}

.ab( @pb )when( isnumber(@pb) ){bottom: @unit*@pb;}
.ab( @pb )when( iskeyword(@pb) ){bottom: @pb;}

.al( @pl )when( isnumber(@pl) ){left: @unit*@pl;}
.al( @pl )when( iskeyword(@pl) ){left: @pl;}

// css3效果 设置
.transform( @option:rotate(0deg) ){
    -webkit-transform: @option;
    transform: @option;
    // 好好复习
    // matrix, rotate, rotate3d, scale, scale3d, skew, translate, translate3d, perspective
    // transform-origin
    // transform-style
    // perspective
    // perspective-origin
    // backface-visibility
}
.transition( @option:all 1.2s ease-in-out 0s ){
    -webkit-transition: @arguments;
    transition: @arguments;
    // 好好复习一下拼写英文
    // transition-property
    // transition-duration
    // transition-timing-function
    // transition-delay
}
.radius( @val : 0 ){
    -webkit-border-radius: @val;
    border-radius: @val;
}
.shadow( @sort : box, @option : none ) when( @sort=box ){
    -webkit-box-shadow: @option;
    box-shadow: @option;
}
.shadow( @sort : box, @option : none ) when( @sort=text ){
    -webkit-text-shadow: @option;
    text-shadow: @option;
}
.borderImage( @option : "url(/i/border.png) 30 30 30 30 round round" ){
    border-image: ~"@{option}";
}

.blur( @num: 5px ){
    @blurVal: @unit * @num;
    
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius= @blurVal, MakeShadow=false); /* IE6~IE9 */
    -webkit-filter: blur( @blurVal ); /* Chrome, Opera */
    -moz-filter: blur( @blurVal );
    -o-filter: blur( @blurVal );
    -ms-filter: blur( @blurVal );
    filter: blur( @blurVal );
    
}

.linearGradient( @startClr : white, @endClr : white ){
    background-color: @endClr;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= "@{startClr}", endColorstr= "@{endClr}");
    background: -moz-linear-gradient(top, @startClr, @endClr);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@startClr), to(@endClr));
    background: linear-gradient(top, @startClr, @endClr);
}

.bg( @clr : white ) when( iscolor(@clr) ){
    // .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
    background-color:@clr;
}
.bg( @clr : white ) when not( iscolor(@clr) ){
    // .mixin (@b) when not (@b > 0) { ... }
    background:@arguments;
}

.selectBgColor( @fc : white, @bc : #006666 ){
    ::-moz-selection{
        background:@bc;
        color:@fc;
        text-shadow:none;
    }
    ::-webkit-selection{
        background:@bc;
        color:@fc;
        text-shadow:none;
    }
    ::selection{
        background:@bc;
        color:@fc;
        text-shadow:none;
    }
}

.loading( @src : "" ){
    background-image:url( ~"@{src}" );
    background-position:center center;
    background-repeat:no-repeat;
}

.formfield( @width : 120px ){
    
    .padding( @unit*7px @unit*5px @unit*15px @unit*@width );
    // 为了兼容低版本ie 有晃动的情况，倒置.label -marginleft失效
    .zoom;
    .label{
        .I-B;
        width:@unit*@width - 10;
        .pr( @unit*10px );
        .pt( @unit*3px );
        .ml( -@unit*@width );
        .text_right;
        .left;
        span{
            .middle;
        }
    }
    
    
}

.formTip(){
    // 红叉叉
    // background-image:url();
    // 叹号
    background-image:url();
    background-repeat:no-repeat;
    background-position:2px center;
    .pl( 20 );
    .fc( #d7605c );
    .mt( 7 );
}

.select( @src: '' ){
    // appearance 不被所有主流浏览器支持，兼容性不好    用js判断有选择性的用这个css属性
    background-image: url( ~"@{src}" );
    background-repeat:no-repeat;
	-webkit-appearance:none;
	-o-appearance:none;
    -ms-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

.borTbl( @clr : #ccc ){
    
    // 用border-rigth也是为了下面让td用first-child伪类。因为ie8及以下是不支持last-child伪类的
    border-right:@unit*1px solid @clr;
    border-top:@unit*1px solid @clr;

    thead td,tfoot td{
        border-bottom:@unit*1px solid @clr;
        &:first-child{
            border-left:@unit*1px solid @clr;
        }
    }
    thead th,tfoot th,tbody td,tbody th{
        border-bottom:@unit*1px solid @clr;
        border-left:@unit*1px solid @clr;
    }
    
}

.borLineTbl( @clr : #ccc ){
    
    border-left:@unit*1px solid @clr;
    border-top:@unit*1px solid @clr;
    border-right:@unit*1px solid @clr;
    
    td,th{
        border-bottom:@unit*1px solid @clr;
    }
    
};
// 自定义的radio, checkbox
.custom-checkbox( @bg : red, @checkedBg : green, @width: 18px, @height : 18px ){
    .I-B;
    .posrel;
    .middle;
    .overhide;
    
    &,.custom-checkbox{
        .hand;
    }
    
    .custom-checkbox{
        .posabs;
        left:0;
        top:0;
        .opacity( 0 );
        width:@unit*300px;
        height:@unit*300px;
        
    }
    
    i{
        .bg( @bg );
        .I-B;
        width:@unit*@width;
        height:@unit*@height;
        .mr( 3px );
    }
    i,span{
        .middle;
    }
    // Fuck ie不支持css3样式，居然也不能写一块儿，只好分开写
    &.checked i{
        .bg( @checkedBg );
    }
    .custom-checkbox:checked + i{
        .bg( @checkedBg );
    }
}

.ui-btn( @bg: #FF7F00, @fc: white, @H: 28px ){
    .I-B;
    .text_center;
    .pl( @unit*15px );
    .pr( @unit*15px );
    .lh( @unit*@H );
    .bg( @bg );
    .hand;
    .middle;
    .fc( @fc );
    .radius( @unit*3px );
    border:@unit*1px solid darken(@bg, 10%);
    
    &:hover{
        background-color:lighten(@bg, 10%);
        border-color:lighten( darken(@bg, 10%), 10%);
    }
    
    &[disabled]{
        border-color:#999 !important;
        background-color:#dedede !important;
        .fc( #888 );
        .shadow( text, @unit*1px @unit*1px @unit*1px white );
        cursor:not-allowed;
    }
    
}

// ================ 实心 方向 箭头 =================
.arrow( @dir:top, @clr:#ccc, @w:5px ) when( @dir=top ){
    .I-B;
    .WH( 0 );
    .overhide;
    border-left:@unit*@w solid transparent;
    border-right:@unit*@w solid transparent;
    border-bottom:@unit*@w solid @clr;
}
.arrow( @dir:right, @clr:#ccc, @w:5px ) when( @dir=right ){
    .I-B;
    .WH( 0 );
    .overhide;
    border-left:@unit*@w solid @clr;
    border-top:@unit*@w solid transparent;
    border-bottom:@unit*@w solid transparent;
}
.arrow( @dir:bottom, @clr:#ccc, @w:5px ) when( @dir=bottom ){
    .I-B;
    .WH( 0 );
    .overhide;
    border-left:@unit*@w solid transparent;
    border-right:@unit*@w solid transparent;
    border-top:@unit*@w solid @clr;
}
.arrow( @dir:left, @clr:#ccc, @w:5px ) when( @dir=left ){
    .I-B;
    .WH( 0 );
    .overhide;
    border-top:@unit*@w solid transparent;
    border-bottom:@unit*@w solid transparent;
    border-right:@unit*@w solid @clr;
}
// popupbox
.popupbox(@th:40, @tbg:#172a3d, @tfc:white, @okbg:#2ac5c7, @cancelbg:#ededed ){
    @closeH: @th - 5;
    .bg( white );
    .undis;
    .dialog-title{
        .lh( @th );
        .bg( @tbg );
        //.linearGradient( #272E37, #5E6E7C );
        .pl( 10px );
        .pr( 10px );
        .posrel;
        //.radius( 5px 5px 0 0 );
        
        .titleTag{
            .fc( @tfc );
            .fz( 16 );
            .fontYH;
        }
        i.closeMe{
            .W( @closeH );
            .lh( @closeH );
            .posabs;
            right:10px;
            top:50%;
            .mt( -@closeH*0.5 );
            .hand;
            .fc( @tfc );
            .b;
            .fz( 20px );
            .text_center;
            //.transition(background-position 0.3s ease 0s);  &times;
            //.transition(transform 0.3s ease 0s);
            //transform-origin:center center;
            //&:hover{
                //background-position:-39px -85px;
            //    transform:rotate( 360deg );
            //}
        }
    }
    
    .dialogContent{
        .padding( 15px 20px 10px 20px );
        .border-box;
        table{
            .W( 100% );
        }
        table.SYS-Tip-tbl{
            .tipIco{
                .bg( url("//gtms02.alicdn.com/tps/i2/TB1NsHPIFXXXXcqapXXBS2R9XXX-130-131.png") no-repeat );
                .WH( 62px );
            }
            th{
                .W( 70px );
                vertical-align:top;
                .Ico_1{
                    background-position:-1px -1px;
                }
                .Ico_2{
                    background-position:-66px -1px;
                }
                .Ico_3{
                    background-position:-1px -67px;
                }
                .Ico_4{
                    background-position:-66px -67px;
                }
            }
        }
        
    }
    .handlerBox{
        .text_center;
        .mt( 10px );
        .pb( 10px );
        .ui-okBtn{
            .ui-btn( @okbg, white, 25 );
            .fontYH;
        }
        .ui-cancel{
            .ui-btn( @cancelbg, #888, 25 );
            .fontYH;
            .ml( 20 );
        }
    }
    
}
// popTip // 后期有待优化，下面的背景颜色不能写死。
.popTip(){
    #handleTipBox{
        position:fixed;
        _position:absolute;
        left:50%;
        z-index:10000;
        top:-60px;
        .W( 320px );
        margin-left:-160px;
        background-color:rgb(23,42,61);
        background-color:rgba(23,42,61,0.7);
        border:4px double black;
        .radius( 5px );
        .border-box;
        padding:15px 20px;
        .transition( all 1.5s ease-in-out 0s );
        .opacity( 0 );
        -webkit-transform:rotateY( -360deg ) scale( 0 );
        transform:rotateY( -360deg ) scale( 0 );
        .shadow( box, 3px 3px 3px #444 );
        .fontYH;
        .fz( 14px );
        .fc( white );
        .closeMe{
            .posabs;
            right:5px;
            top:3px;
            .fz( 16px );.b;
            .text_center;
            .WH( 15px );
            line-height:15px;
            .hand;
            &:hover{
                .fc( red );
            }
        }
        .content{
            .fc( white );
            .text_center;
            //.shadow( text, 1px 1px 1px white );
        }
        
        &.open{
            .opacity( 1 );
            -webkit-transform:rotateY( 0deg ) scale( 1 );
            transform:rotateY( 0deg ) scale( 1 );
            top:95px;
        }
    }
}
// popupBox 配合tsh.popupBox使用 展示时 背景变糊效果
.bgblur(){
    body.bgblur{
        >*:not([poptype="tsh-popbox"]){
            -webkit-filter:blur( 3px );
            -moz-filter:blur( 3px );
            -o-filter:blur( 3px );
            -ms-filter:blur( 3px );
            filter:blur( 3px );
        }
    }
}